<template>
	<view class="circle-box">
		<!-- 活动部分 -->
		<view class="title-top">
			<text class="title-lt">活动</text>
			<view class="title-rt" @click="toAllActive">
				<text>全部</text>
				<img src="https://file.casugn.com/storecompcard//VdIbRcqZR5C03e9dbb557067235619274848cb048142_1681271349443.png"
					alt="">
			</view>
		</view>
		<!-- 活动列表信息 -->
		<view class="active-list" v-for="(item,index) in activeList" :key="index" @click="toCircleInfo(item,index)">
			<view class="img-box">
				<image class="cover" :src="item.image" mode="aspectFill"></image>
				<view class="img-title-box">
					<view class="img-title">
						{{item.title==null?"":item.title}}
					</view>
					<view class="img-subtitle">
						{{item.signNumber==null?"0":item.signNumber}}人
					</view>
				</view>
			</view>
			<view class="time-box">
				<img src="https://file.casugn.com/storecompcard//8ZtmYEEYuMwy569f0b4953e7c042dafbd8416ba1301b_1681271289947.png"
					alt="">
				<text>{{item.startTime==null?"":item.startTime}} - {{item.endTime==null?"":item.endTime}}</text>
			</view>
			<view class="time-box address-box">
				<img src="https://file.casugn.com/storecompcard//Mx1yGAWpNa2A0a3e96f5b6b2f81b87821e36c22a457b_1681271333291.png"
					alt="">
				<text>{{item.address||""}}</text>
			</view>
		</view>

		<!-- 视频部分  审核状态不显示-->
		<view v-if="!wxCheckType">
			<view class="title-top video-top">
				<text class="title-lt">视频</text>
				<view class="title-rt" @click="toAllVideo(0)">
					<text>全部</text>
					<img src="https://file.casugn.com/storecompcard//VdIbRcqZR5C03e9dbb557067235619274848cb048142_1681271349443.png"
						alt="">
				</view>
			</view>
			<view class="video-scroll">
				<!-- @scroll="scroll" -->
				<scroll-view class="scroll-view_H" scroll-x="true" scroll-left="120">
					<view id="demo1" class="scroll-view-item_H" @click="toAllVideo(item.id)"
						v-for="(item,index) in videoList" :key="index">
						<!-- <img :src="item.cover" alt=""> -->
						<u--image :showLoading="true" :src="item.cover" radius="8rpx" :lazy-load="true" width="360rpx"
							height="480rpx" model="aspectFill"></u--image>
					</view>
				</scroll-view>
			</view>
		</view>

		<!-- 月份弹窗内容 -->
		<u-picker :show="monthShow" :columns="columns" @confirm="monthConfirm" @cancel="monthCancle"></u-picker>

	</view>

</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import pickRegions from '@/components/pick-regions/pick-regions.vue'
	export default {

		components: {
			pickRegions
		},

		data() {
			return {
				searchShow: true, //搜索显示
				region: [],
				province: '',
				city: '',
				district: '',
				areaShow: true,
				defaultRegion: ['山东省', '日照市', '东港区'],
				defaultRegionCode: '371102',
				nowMoth: '', //当前选择的年月

				defaluteStatus: 1, //初始状态 1-默认 2-已报名 3-待参加
				tabList: [{
						imgUrl: 'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png',
						name: '活动'
					},
					{
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '供求市场'
					},
					{
						imgUrl: 'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png',
						name: '我的'
					},
				],
				tabClickIndex: 0, //tab选中的index值
				statusMenuLists: [{
					name: '默认',
					id: 0,
				}, {
					name: '已报名',
					id: 1,
				}, {
					name: '待参加',
					id: 2,
				}, ],
				typeValue: 1, //0全部 1报名中 2已结束 3我发布的
				monthNum: '6', //默认月份
				monthShow: false, //月份弹窗控制
				columns: [
					['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
				],
				monthInfoNum: '', // 月份信息活动数量
				adress: '全国', //地址选择
				// 活动信息列表
				activeList: [],
				// 视频封面列表
				videoList: []
			}
		},
		computed: {
			...mapState(['wxCheckType']),
			regionName() {
				// 转为字符串
				return this.region.map(item => item.name).join(' ')
			}
		},
		mounted() {
			this.getInitDate()
		},
		onShow() {

			this.getInitDate()

		},
		methods: {
			// 活动全部跳转 全部活动分页
			toAllActive() {
				uni.navigateTo({
					url: '/pagesBusiness/activeList/activeList'
				})
			},
			// 视频跳转
			toAllVideo(id) {
				console.log("点击数据" + id)
				uni.navigateTo({
					url: '/pages/video/video?id=' + id
				})
			},
			// 点击导航栏左侧
			goBack() {
				uni.switchTab({
					url: '/pages/user/user'
				})
			},

			// 获取视频列表
			getVideoLists() {
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				let data = {
					openId: openId.openid,
					pageNo: 1,
					pageSize: 5,
				}
				this.$api.getVideoImgLists(data).then(res => {
					console.log(res)
					if (res.success) {
						this.videoList = res.result.records

						// if (res.result.records) {
						// 	this.monthInfoNum = res.result.records.length
						// } else {
						// 	this.monthInfoNum = 0
						// }

					}
				})
			},

			// 获取选择的地区
			handleGetRegion(region) {
				console.log(region)
				this.region = region
				this.adress = region[0].name + region[1].name + region[2].name
				this.province = region[0].name
				this.city = region[1].name
				this.district = region[2].name
				this.getAllCircleLists()
			},
			// 初始化获取当前年月
			getInitDate() {
				let date = new Date().getTime()
				let newData = this.shijianc(date)
				let dateArr = newData.split('-')
				console.log(dateArr)
				let a = dateArr[1]
				if (a > 9) {
					this.monthNum = dateArr[1]
				} else {
					this.monthNum = dateArr[1].split('')[1]
				}

				this.nowMoth = newData
				this.getAllCircleLists()
				this.getVideoLists()
			},
			// 时间戳转yy-mm-dd hh-mm-ss
			shijianc(time) {
				var date = new Date(time)
				console.log("测试" + date)
				var Y = date.getFullYear() + '-'
				// + '-'
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1)
				// var M = date.getMonth()+1
				var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
				var h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
				var m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes())
				// + ':'
				var s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds())
				return Y + M
			},
			// 获取默认圈子列表
			getAllCircleLists() {
				let openId = uni.getStorageSync('openId')
				console.log("这是openId", openId)
				let data = {
					type: this.typeValue, //0全部 1报名中 2已结束 3我发布的
					openId: openId.openid,
					pageNo: 1,
					pageSize: 2,
				}
				this.$api.getAllCircleList(data).then(res => {
					console.log(res)
					if (res.success) {
						this.activeList = res.result.records

						if (res.result.records) {
							this.monthInfoNum = res.result.records.length
						} else {
							this.monthInfoNum = 0
						}

					}
				})
			},
			// tab切换点击事件
			tabClick(item, index) {
				console.log(index)
				console.log(item)
				this.tabClickIndex = index
				if (index == 1) {
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//nhJ5ffGc2zhs60d80f016055f57051d38ff74b8a4e0b_1660098959213.png'
					})
					this.tabList[1].imgUrl =
						'https://file.casugn.com/storecompcard//WYWMCallue7ueed3b042042bb6067c70420fb8327f23_1660099871888.png'
					uni.setStorageSync(`supplyJumpTo`, 2)
					uni.navigateTo({
						url: '/pagesBusiness/marketPage/marketPage'
					})
					// this.mySupPurPageShow=false
					// this.activePageShow=false
					// this.marketPageShow=true
				} else if (index == 0) {
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png'
					})
					this.tabList[0].imgUrl =
						'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png'

					// uni.navigateTo({
					// 	url: '/pagesBusiness/circleList/circleList'
					// })
					// this.activePageShow=true
					// this.marketPageShow=false
					// this.mySupPurPageShow=false
				} else {
					this.tabList.forEach(item => {
						item.imgUrl =
							'https://file.casugn.com/storecompcard//66vsljx46V4wc11af23db02e61d63d69974c18e9efba_1658388892934.png'
					})
					this.tabList[2].imgUrl =
						'https://file.casugn.com/storecompcard//CLGdd9HTBntg8bed5fe978d2b4cf096091636771c17b_1658388882147.png'

					uni.navigateTo({
						url: '/pagesBusiness/mySupPur/mySupPur'
					})
					// this.mySupPurPageShow=true
					// this.activePageShow=false
					// this.marketPageShow=false
				}
				console.log(this.tabClickIndex)
			},
			// 状态切换点击
			statusMenuClick(item) {
				console.log(item)
				this.typeValue = item.id
				this.getAllCircleLists()
				this.defaluteStatus = item.id
			},
			// 添加圈子活动
			addClick() {
				uni.navigateTo({
					url: '/pagesBusiness/activeList/addActive'
				})
			},
			// 月份点击选择弹窗显示
			monthSelect() {
				this.monthShow = true
			},
			// 月份选择确认事件
			monthConfirm(e) {
				console.log(e);
				let date = new Date().getTime()
				let newData = this.shijianc(date)
				let dateArr = newData.split('-')
				console.log(dateArr)
				this.monthNum = e.indexs[0] + 1
				this.monthShow = false
				if (this.monthNum > 9) {
					this.nowMoth = dateArr[0] + '-' + this.monthNum
				} else {
					this.nowMoth = dateArr[0] + '-0' + this.monthNum
				}

				this.getAllCircleLists()
				// console.log()
			},
			// 月份选择取消时间
			monthCancle() {
				this.getInitDate()
				this.monthShow = false
			},
			// 点击进入详情页面
			toCircleInfo(item, index) {
				uni.navigateTo({
					url: `/pagesBusiness/circleList/circleListInfo?circleStatus=${item.activeStatus}&circleId=${item.id}`
				})
			}

		}
	}
</script>

<style lang="scss" scoped>
	.circle-box {
		background: #F8F9FF;
		position: absolute;
		width: 100%;
		height: 100%;
		z-index: 10;


		.title-top {
			background: white;
			font-size: 32rpx;
			font-family: PingFang SC-Semibold, PingFang SC;
			font-weight: 600;
			color: #1D2129;
			height: 96rpx;
			line-height: 96rpx;
			background: #FFFFFF;
			display: flex;
			justify-content: space-between;

			.title-lt {
				margin-left: 32rpx;
			}

			.title-rt {
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #86909C;
				line-height: 39rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-right: 32rpx;

				img {
					margin-left: 8rpx;
					width: 32rpx;
					height: 32rpx;
					vertical-align: middle;
					position: relative;
					top: 2rpx;
				}
			}
		}

		.active-list {
			background: #FFFFFF;
			// border-bottom: 1upx solid #EEEEEE;
			position: relative;
			height: 500rpx;
			overflow: hidden;


			.img-box {
				width: 686rpx;
				height: 344rpx;
				margin: 0 auto;
				margin-top: 24rpx;
				// background: red;
				position: relative;

				.cover {
					width: 100%;
					height: 100%;
				}


				.img-title-box {
					position: absolute;
					bottom: 0;
					width: 100%;
					height: 114rpx;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);

					.img-title {
						margin-top: 16rpx;
						margin-left: 24rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Semibold, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 39rpx;
					}

					.img-subtitle {
						margin-top: 8rpx;
						margin-left: 24rpx;
						font-size: 24rpx;
						font-family: PingFang SC-Regular, PingFang SC;
						font-weight: 400;
						color: #FFFFFF;
						line-height: 34rpx;
					}
				}
			}

			.time-box {
				display: flex;
				justify-content: flex-start;
				margin-top: 26rpx;
				margin-left: 32rpx;

				img {
					width: 32rpx;
					height: 32rpx;
				}

				text {
					font-size: 24rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #4E5969;
					line-height: 34rpx;
					margin-left: 8rpx;
				}

			}

			.address-box {
				margin-top: 16rpx;
			}


			.active-status {
				position: absolute;
				width: 140upx;
				height: 130upx;
				top: 38upx;
				right: 29upx;

				img {
					width: 140upx;
					height: 130upx;
				}
			}

			.active-time-box {
				width: 690upx;
				height: 100upx;
				background: #FFFFFF;
				border: 1upx solid #413BF3;
				box-shadow: 0upx 3upx 10upx 0upx rgba(65, 59, 243, 0.1000);
				border-radius: 20upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 100upx;
				text-align: center;
				margin-bottom: 30upx;
			}

			.active-head {
				display: flex;
				letter-spacing: 3upx;

				.head-img {
					width: 72upx;
					height: 72upx;
					border-radius: 50%;

					img {
						width: 72upx;
						height: 72upx;
						margin-top: 1upx;
					}
				}

				.active-name-info {
					margin-left: 21upx;

					.active-name {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #000000;
					}

					.active-introduce {
						margin-top: 19upx;
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #999999;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
						width: 400upx;
					}
				}
			}

			.active-title {
				letter-spacing: 3upx;
				margin-top: 30upx;
				font-size: 30upx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #666666;

				.active-text {
					color: #000000;
				}
			}

			.active-content {
				line-height: 48upx;
			}

			.active-info-img {
				margin: 0 auto;
				margin-top: 30upx;
				width: 690upx;
				height: 350upx;
				border-radius: 30upx;
				position: relative;
				overflow: hidden;

				img {
					width: 690upx;
					height: 350upx;
				}

				.active-info-mask {
					position: absolute;
					width: 690upx;
					height: 70upx;
					bottom: 0;
					background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
					;
					line-height: 70upx;
					font-size: 24upx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}

			.active-address {
				margin-top: 30upx;
				letter-spacing: 3upx;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.active-address-right {
					.active-address-address {
						font-size: 24upx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #413BF3;
						margin-right: 20upx;
						position: relative;
						top: -2upx;
					}

					img {
						width: 21upx;
						height: 24upx;
					}
				}
			}
		}

		.video-top {
			margin-top: 24rpx;
		}

		.video-scroll {
			height: 544rpx;
			margin-bottom: 8rpx;
			background: #FFFFFF;

			.scroll-view-item_H {
				display: inline-block;
				width: 360rpx;
				height: 480rpx;
				// background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				margin-top: 32rpx;
				margin-left: 32rpx;


			}

			.scroll-view_H {
				white-space: nowrap;
				width: 100%;
			}

			.scroll-view-item {
				height: 300rpx;
				line-height: 300rpx;
				text-align: center;
				font-size: 36rpx;

			}
		}
	}
</style>